import React, {Component} from 'react'
import {Breadcrumb, Table, Tabs, InputNumber, Card, Space,Input} from 'antd'
import {withRouter } from 'react-router-dom';
import  './subpageStyle.scss'


@withRouter
class TaskLog extends Component{
    constructor(props){
        super(props);
        this.state={
            page: 1,
            exchangeColumns:[
                {
                    title: '序号',
                    key: 'index',
                    render: (text, record, index)=><span>{index+1}</span>
                },
                {
                    title: '任务编码',
                },
                {
                    title: '资源编码',
                },
                {
                    title: '源数据库',
                },{
                    title: '源表'
                },{
                    title: '抽取数据量'
                },{
                    title: '目标库'
                },{
                    title: '目标表'
                },{
                    title: '入库数据量'
                },{
                    title: '触发时间'
                },{
                    title: '目标表',
                    key: 'operation',
                    render: () => <a>查看详情</a>
                }
            ],
            taskColumns: [
                {
                  title:"序号",
                  render:(text, record, index)=><span>{index+1}</span>,
                 
                },{
                  title:"服务编号", dataIndex:"taskId", key:"taskId", 
                },{
                  title:"服务名称", dataIndex:"taskName", key:"taskName",
                },{
                  title:"数据源名称", dataIndex:"sourceName", key:"sourceName",
                },{
                  title:"采集周期", dataIndex:"taskTypeName", key:"taskTypeName", 
                },{
                  title:"运行状态", dataIndex:"taskStatus", key:"taskStatus", 
                },{
                  title: "服务描述",
                },
                {
                  title:"创建时间", dataIndex:"createDate", key:"createDate", 
                },
              ] 
        }
    }

    componentDidMount(){
       
    }


    render(){
        const {page, taskColumns} = this.state;
        const record = this.props.location.query ? [this.props.location.query.record] : []
        return(
            <div className={'content'}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item href="#/dataCollection/task">数据采集任务列表</Breadcrumb.Item>
                    <Breadcrumb.Item>任务信息日志</Breadcrumb.Item>
                </Breadcrumb>
                <div className='monitorTitle'>任务信息总览</div>
                    <Table dataSource={record} pagination={{hideOnSinglePage:true}} columns={taskColumns}></Table>
                <div className='monitorTitle'>交换任务列表</div>
                <Table columns={this.state.exchangeColumns} pagination={{pageSize:page,showSizeChanger:false}}/>
                {/* <div className={this.props.data.length>0 ? 'footer' : 'withoutPagination'}> */}
                <div className={'withoutPagination'}>
                显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{0}项
                </div>
            </div>
        )
    }
}

export default TaskLog;